{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<script src="https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/dist/jsoneditor.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/jsoneditor@10.2.0/dist/jsoneditor.min.css" rel="stylesheet">

<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h1 class="page-title">Free Online JSON Formatter & Validator - Beautify and Minify JSON</h1>
      </div>
      <div class="seo-h1">
        <h2> Format and Validate JSON in Real-Time</h2>
        <h2> Key Features of Our JSON Tool
            <ul>
                <li>Beautify JSON: Transform minified JSON into a human-readable, indented structure.</li>
                <li>Validate JSON: Get precise error messages with line and column numbers (e.g., Ln:1 Col:1).</li>
                <li>Minify JSON: Compress your JSON to reduce file size for production.</li>
                <li>Syntax Highlighting: Ace editor provides clear visual cues for easy reading.</li>
                <li>Collapsible Sections: Navigate large JSON objects and arrays with ease.</li>
                <li>100% Client-Side: Your data never leaves your browser, ensuring privacy and speed.</li>
            </ul>
        </h2>
        <h2> How to Use This JSON Formatter?
            <ul>
                <li>Paste or type your JSON data into the editor.</li>
                <li>Select the desired formatting or validation option from the menu.</li>
                <li>Click the "Format" or "Validate" button to apply the action.</li>
            </ul>
        </h2>
        <h2>Frequently Asked Questions (FAQs)
            <h3>What is JSON?</h3>
            <h3>Why do I need to validate JSON?</h3>
            <h3>Is this JSON formatter free?</h3>
        </h2>
      </div>
    </div>
  </div>
</div>
<style type="text/css">
.jsoneditor {
    border: thin solid #2a2b2d;
}
.jsoneditor-menu {
    background-color: #1e2022;
}
.jsoneditor-modes {
    display:none;
}
.jsoneditor-poweredBy {
    display:none;
}
.jsoneditor-repair {
    display:none;
}
</style>

<div class="page-body">
    <div class="container-xl">
       <div class="card">
          <div class="card-header">
            <div class="row align-items-center">
              <div class="col">
                <h3 class="card-title">JSON Formatter & Validator</h3>
              </div>
              <div class="col-auto">
                <div class="btn-group" role="group" id="exportButtons" style="display: none;">
                  <button type="button" class="btn btn-primary" onclick="exportToExcel()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-spreadsheet me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                      <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                      <path d="M8 11h8v7h-8z"></path>
                      <path d="M8 15h8"></path>
                      <path d="M11 11v7"></path>
                    </svg>
                    Export to Excel
                  </button>
                  <button type="button" class="btn btn-success" onclick="exportToCsv()">
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file-text me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                      <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                      <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                      <path d="M9 9l1 0"></path>
                      <path d="M9 13l6 0"></path>
                      <path d="M9 17l6 0"></path>
                    </svg>
                    Export to CSV
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <div id="jsoneditor" style="width: 100%; height: 500px;"></div>
          </div>
       </div>
    </div>
</div>

<script type='text/javascript'>
// create the editor
        const container = document.getElementById("jsoneditor")
        const options = {
            ace: false,
            mainMenuBar: true,
            navigationBar: false,
            colorPicker: false,
            enableSort: false,
            enableTransform: false,
            language: 'en',
            escapeUnicode: false,
            allowSchemaSuggestions: true,
            mode: 'code',
            modes: ['code'],
            onValidationError: function(errors) {
                console.log(errors);
            },
            onChange: function() {
                checkJsonFormat();
            }
        }
        const editor = new JSONEditor(container, options)

        // Check JSON format and show/hide export buttons
        function checkJsonFormat() {
            try {
                const jsonData = editor.getText();
                if (jsonData.trim()) {
                    const parsedData = JSON.parse(jsonData);
                    const exportButtons = document.getElementById('exportButtons');

                    if (Array.isArray(parsedData) && parsedData.length > 0) {
                        exportButtons.style.display = 'block';
                    } else {
                        exportButtons.style.display = 'none';
                    }
                } else {
                    document.getElementById('exportButtons').style.display = 'none';
                }
            } catch (error) {
                document.getElementById('exportButtons').style.display = 'none';
            }
        }

        // Initial check
        setTimeout(checkJsonFormat, 100);

        // Export functions
        function exportToExcel() {
            try {
                const jsonData = editor.getText();
                if (!jsonData.trim()) {
                    alert('Please enter some JSON data first.');
                    return;
                }

                // Validate JSON
                const parsedData = JSON.parse(jsonData);

                // Check if data is an array
                if (!Array.isArray(parsedData)) {
                    alert('JSON data must be an array format for export. Example: [{"name": "John", "age": 30}, {"name": "Jane", "age": 25}]');
                    return;
                }

                if (parsedData.length === 0) {
                    alert('JSON array is empty.');
                    return;
                }

                // Create form and submit
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/json-to-excel';
                form.style.display = 'none';

                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'jsonData';
                input.value = jsonData;

                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = getCsrfToken();

                form.appendChild(input);
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);

            } catch (error) {
                alert('Invalid JSON data. Please check your JSON format.');
            }
        }

        function exportToCsv() {
            try {
                const jsonData = editor.getText();
                if (!jsonData.trim()) {
                    alert('Please enter some JSON data first.');
                    return;
                }

                // Validate JSON
                const parsedData = JSON.parse(jsonData);

                // Check if data is an array
                if (!Array.isArray(parsedData)) {
                    alert('JSON data must be an array format for export. Example: [{"name": "John", "age": 30}, {"name": "Jane", "age": 25}]');
                    return;
                }

                if (parsedData.length === 0) {
                    alert('JSON array is empty.');
                    return;
                }

                // Create form and submit
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '/json-to-csv';
                form.style.display = 'none';

                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = 'jsonData';
                input.value = jsonData;

                const csrfInput = document.createElement('input');
                csrfInput.type = 'hidden';
                csrfInput.name = 'csrfmiddlewaretoken';
                csrfInput.value = getCsrfToken();

                form.appendChild(input);
                form.appendChild(csrfInput);
                document.body.appendChild(form);
                form.submit();
                document.body.removeChild(form);

            } catch (error) {
                alert('Invalid JSON data. Please check your JSON format.');
            }
        }

        function getCsrfToken() {
            const cookies = document.cookie.split(';');
            for (let cookie of cookies) {
                const [name, value] = cookie.trim().split('=');
                if (name === 'csrftoken') {
                    return value;
                }
            }
            return '';
        }

</script>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "Free Online JSON Formatter and Validator",
  "applicationCategory": "DeveloperApplication",
  "operatingSystem": "Any",
  "offers": {
    "@type": "Offer",
    "price": "0",
    "priceCurrency": "USD"
  },
  "description": "Format, validate, beautify, and minify JSON data for free online.",
  "keywords": "json, formatter, validator, beautifier, minify, online tool"
}
</script>
{%endblock%}
